<template>
    <li>
    <label>
        <!-- <input v-if="todo.done" type="checkbox" checked/>
        <input v-else type="checkbox"/> --> 
         <input  type="checkbox" :checked="todo.done" @change="checkIncident($event,todo.id)"/>
         <!-- 如下代码也能实现功能， 但是不太推荐，因为违反原则，props 只读，不允许修改。 -->
         <!-- <input  type="checkbox" v-model="todo.done"/> -->
        
        <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="delById(todo.id)">删除</button>
    </li>
</template>

<script>

import pubsub from 'pubsub-js'
    export default {
        name:'UserItem',
        // 声明接收 todo 对象
        props:['todo'],
        methods:{
            // 勾选or取消勾选
            checkIncident(event,id){
                // this.revamp(id)
                // 触发总线 revamp 事件
                this.$bus.$emit('revamp',id)
            },
            // 删除
            delById(id){
               if(confirm('是否确认删除？')){
                //  this.del(id)
                // 触发总线实例的 del 事件
                // this.$bus.$emit('del',id)

                // 发布消息
                pubsub.publish('del',id)
               }
            }
        }
        
    }
</script>

<style scoped>
    /*item*/
    li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }

    li:hover{
        background-color: #ddd;
    }

    li:hover button{
        display: block;
    }

</style>